body{
    background: #000;
    color:#fff;
}
.b,.box,.title,.title::before,.title::after{
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
    right:0;
    margin: auto;
}
.b{
    width:450px;height:250px;
}
.box{
    width:450px;height:250px;
    position: relative;
    background-color: #fff;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}
.img{
    width:400px;height:200px;
    background: url(1.jpg) no-repeat center;
    background-size:100%;
    margin: auto;
    -webkit-transition: all 1s;
}
.title{
    width:280px;height:120px;
    padding-top:40px;
    -webkit-transition: padding-top 0.5s ease;
}
.title::before{
    content:'';
    border-width:4px 0;
    border-style:solid;
    border-color:#fff;
    -webkit-transform: scaleX(0);
    -webkit-transition: transform 1s;
}
.title::after{
    content:'';
    border-width:0px 2px;
    border-style:solid;
    border-color:#fff;
    -webkit-transform: scaleY(0);
    -webkit-transition: transform 1s;
}
.box:hover .title::before,.box:hover .title::after{
    -webkit-transform: scaleX(1); 
}
.baidu{
    font-size: 25px;
    line-height: 50px;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    background-image: -webkit-linear-gradient(left,  #d1528e 0%, #8eb5bf 25%, #d1528e 50%, #8eb5bf 75%, #d1528e 100%);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-background-size: 200% 100%;
    -webkit-animation: animation 2s infinite linear;
}
.baoming{
    font-size: 16px;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    color:#6a9233;
    -webkit-animation: colors 5s infinite linear ;
   
}
.box:hover .img{
     /* 图片模糊 */
     filter: url(../images/blur.svg#blur);
     /* FireFox, Chrome, Opera */
     -webkit-filter: blur(10px);
     /* Chrome, Opera */
     -moz-filter: blur(10px);
     -ms-filter: blur(10px);
     filter: blur(10px);
     filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
     /* IE6~IE9 */
}

.box:hover .baidu,.box:hover .baoming{
    opacity: 1
}
.box:hover .title{
    padding-top:32px;
}
@-webkit-keyframes animation {
    0%  { background-position: 0 0;}
    100% { background-position: -100% 0;}
}
@-webkit-keyframes colors{
    0% {color:#6a9233}
    10%{color:#3598dc}
    20% {color:#6a9233}
    30%{color:#3598dc}
    70% {color:#6a9233}
    80%{color:#3598dc}
   100% {color:#6a9233}
   
}